<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Layouts</title>

    <script type="text/javascript" src="jquery-1.6.1.js"></script>
    <script type="text/javascript" src="layouts/VBox.js"></script>
    <script type="text/javascript" src="layouts/HBox.js"></script>
    <script type="text/javascript" src="Box.js"></script>

</head>
<body>

    <div class="VBox" data-gap="50px">

        <div class="HBox" data-gap="50px">

            <div class="Box" style="border: 1px #333333 solid; background-color: #000099; width: 200px; height: 200px;">

                <div data-top="10" data-left="10" data-bottom="10" data-right="10"
                     style="border: 1px #333333 solid;
                            background-color: #999999;
                            padding: 10px">
                    one
                </div>

                <div data-top="10" data-left="10"
                     style="border: 1px #333333 solid;
                            background-color: #999999;
                            padding: 10px">
                    two
                </div>

                <div data-bottom="10" data-right="10"
                     style="border: 1px #333333 solid;
                            background-color: #999999;
                            padding: 10px">
                    three
                </div>

            </div>

            <div class="Box" style="border: 1px #333333 solid; background-color: #000099; width: 200px; height: 200px;">

                <div data-top="10" data-left="10" data-bottom="10" data-right="10"
                     style="border: 1px #333333 solid;
                            background-color: #999999;
                            padding: 10px">
                    one
                </div>
                <div data-top="10" data-left="10"
                     style="border: 1px #333333 solid;
                            background-color: #999999;
                            padding: 10px">
                    two
                </div>
                <div data-bottom="10" data-right="10"
                     style="border: 1px #333333 solid;
                            background-color: #999999;
                            padding: 10px">
                    three
                </div>

            </div>

        </div>

        <div class="HBox" data-gap="10px">

            <div class="VBox" data-gap="10px" style="border: 1px #333333 solid; background-color: #990000; padding: 10px">
                <div style="border: 1px #333333 solid; background-color: #999999;  padding: 10px;">one</div>
                <div style="border: 1px #333333 solid; background-color: #999999;  padding: 10px;">two</div>
                <div style="border: 1px #333333 solid; background-color: #999999;  padding: 10px;">three</div>
            </div>

            <div class="VBox" data-gap="10px" style="border: 1px #333333 solid; background-color: #990000; padding: 10px">
                <div style="border: 1px #333333 solid; background-color: #999999;  padding: 10px;">one</div>
                <div style="border: 1px #333333 solid; background-color: #999999;  padding: 10px;">two</div>
                <div style="border: 1px #333333 solid; background-color: #999999;  padding: 10px;">three</div>
            </div>

            <div class="VBox" data-gap="10px" style="border: 1px #333333 solid; background-color: #990000; padding: 10px">
                <div style="border: 1px #333333 solid; background-color: #999999;  padding: 10px;">one</div>
                <div style="border: 1px #333333 solid; background-color: #999999;  padding: 10px;">two</div>
                <div style="border: 1px #333333 solid; background-color: #999999;  padding: 10px;">three</div>
            </div>

       </div>

        <div class="HBox" data-gap="10px">

            <div style="position: relative; height: 400px; border: 1px #333333 solid; background-color: #000099;">

                <div style="position: absolute;
                            display: inline-block;
                            top: 10px; left: 10px; bottom: 10px; right: 10px;
                            border: 1px #333333 solid;
                            background-color: #999999;
                            padding: 10px">
                    one
                </div>
                <div style="position: absolute;
                            display: inline-block;
                            top: 10px; left: 10px;
                            border: 1px #333333 solid;
                            background-color: #999999;
                            padding: 10px">
                    two
                </div>
                <div style="position: absolute;
                            display: inline-block;
                            bottom: 10px; right: 10px;
                            border: 1px #333333 solid;
                            background-color: #999999;
                            padding: 10px">
                    three
                </div>

            </div>

            <div style="position: relative; height: 400px; border: 1px #333333 solid; background-color: #000099;">

                <div style="position: absolute;
                            display: inline-block;
                            top: 10px; left: 10px; bottom: 10px; right: 10px;
                            border: 1px #333333 solid;
                            background-color: #999999;
                            padding: 10px">
                    one
                </div>
                <div style="position: absolute;
                            display: inline-block;
                            top: 10px; left: 10px;
                            border: 1px #333333 solid;
                            background-color: #999999;
                            padding: 10px">
                    two
                </div>
                <div style="position: absolute;
                            display: inline-block;
                            bottom: 10px; right: 10px;
                            border: 1px #333333 solid;
                            background-color: #999999;
                            padding: 10px">
                    three
                </div>

            </div>

        </div>

   </div>

</body>
</html>